<template>
  <el-card>
    <el-form ref="addForm" label-width="100px" :model="cataData" :rules="rules">
      <el-form-item prop="pid" label="上级分类">
        <!-- 给这个下拉列表惊醒双向数据绑定  可以避免一些错误  ！！！ -->
        <el-select v-model="cataData.pid">
          <el-option
            v-for="item in cateList"
            :key="item.id"
            :label="item.catename"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="catename"  label="分类名称">
        <el-input placeholder="请输入分类名称" v-model="cataData.catename"></el-input>
      </el-form-item>
      <el-form-item prop="img" label="分类图片">
          <!-- 
              action:图片上传的地址
              list-type：约定图片展示方式
              on-preview:图片预览的相关方法
              on-remove：图片移出的方法
              auto-upload：是佛自动上传
           -->
        <el-upload
          action="#"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :auto-upload="false"
          :on-change="fileChange"
          :file-list="imgList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item prop="status" label="状态">
        <el-radio-group v-model="cataData.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="操作">
        <el-button type="primary" @click="submitForm">更新</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
// 引入商品管理列表
import { getCateById, getCateList } from "../../request/categroy";
export default {
  data() {
    return {
        cateList: [],
        cataData: {
        id:'',
        pid: "",
        catename:"",
        status:'',
    },
    imgList:[],
    //   表单效验
    rules:{
        pid: {required:true,message:'请选择上级分类'},
        catename:{required:true,message:'请选择分类名称'},
        status:{required:true,message:'状态'}
    },
      // 和上传组件相关
    dialogImageUrl: "",
    dialogVisible: false,
    };
    },
    methods: {
    // 图片上传的   。。   监听图片上传的变化
    fileChange(file){
        // 动态在表单数据模型中添加img属性，属性值为图片的原始对象
        this.cataData.img=file.raw
        // console.log(file)
    },
    submitForm(){
        // validate表DNA中级效验方法
        this.$refs.addForm.validate(async valid=>{
            // if(valid)表示表单效验通过
            if(valid){
                const fd=new FormData();
                for(let key in this.cataData){
                    fd.append(key,this.cataData[key])
                }
                const res=await this.$http.post('/api/cateedit',fd)
                console.log(res)
                if(res.code===200){
                    this.$success('更新成功')
                    // 添加成功后的页面重定向
                    return this.$router.push('/category')
                }else{
                    this.$error('更新失败 ')
                }
            }else{
                console.log('表单未通过效验')
            }
        })
    },
    // 这个是方法
    async getCateList() {
      // 这个是数据
        const list = await getCateList();
        if (list) {
            this.cateList = list;
        }
    },
    async getCateById(){
        // 获取到了动态路由id
        const info=await getCateById(this.$route.params.id);
        // console.log(info)
        if(info){
            this.cataData=info;
            console.log(this.cataData)
            // 更新图片预览
            this.imgList=info.img===''?[]:[{url:this.$imgBaseURL+info.img}]
        }
    }, 
    // 和图片上传相关的方法
    handleRemove(file, fileList) {
    console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
    this.dialogImageUrl = file.url;
    this.dialogVisible = true;
    },
  },
  // 在生命周期函中调用methods方法，
  created() {
    this.getCateList();
    // 获取动态路由参数
    // this.cataData.id=this.$route.params.id;
    // 根据id
    this.getCateById();
  },
};
</script>

<style lang="less" scoped>
.el-form {
  width: 600px;
  margin: auto;
}
</style>